<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>首页顶部跳转管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 添加 -->
        <el-form :inline="true" class="user-search">
            <el-form-item label="">
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
            </el-form-item>
        </el-form>

        <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
            element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="img" label="图片路径" width="300">
                <template slot-scope="scope">
                    <img style="width: 90px;height: 90px;" :src="scope.row.img">
                </template>
            </el-table-column>
            <el-table-column prop="url" label="跳转的路径" width="300">
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteJump(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
            <el-form label-width="120px" ref="editForm">
                <el-form-item label="图片" style="">
                    <div class="upload-demo">
                        <el-upload action="" :http-request="mainImgUpload" :show-file-list="false"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div style="position:relative;margin-left: 24px;" v-if="urlData.img">
                            <img :src="urlData.img" class="avatar" />

                            <div class="deleUrl">
                                <el-button type="danger" icon="el-icon-delete" circle
                                 @click="delImageClick()">
                                </el-button>
                            </div>
                        </div>

                    </div>
                </el-form-item>
                <el-form-item label="跳转路径">
                    <el-input size="small" v-model="urlData.url" placeholder="请输入跳转路径"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="addJump()"
                    v-if="title == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="upJump()"
                    v-if="title == '修改'">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    selectJumpAlls,
    addJumps,
    DeleteJumpByIds,
    selectJumpByTypes,
    updateJumps
} from "../../api/userMG";
import client from "@/utils/ossClient.js";
export default {
    data() {
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: "添加",
            listData: [],
            urlData: {
                img: '',
                url: ''
            }
        }
    },
    created() {
        this.getdata()
    },
    methods: {
        delImageClick() {
            this.urlData.img = ''
        },
        // 修改
        upJump() {
            this.loading = true;
            var urlData = JSON.parse(JSON.stringify(this.urlData));
            updateJumps(urlData).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 添加
        addJump() {
            this.loading = true;
            this.urlData.type = 1;
            var urlData = JSON.parse(JSON.stringify(this.urlData))
            addJumps(this.urlData).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisible = false
                    this.$message({
                        type: "success",
                        message: res.msg,
                    });
                    this.getdata();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 删除
        deleteJump(index, row) {
            this.$confirm("确定要删除吗?", "信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DeleteJumpByIds({ id: row.id })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "已删除！",
                                });
                                this.getdata();
                            } else {
                                this.$message({
                                    type: "info",
                                    message: res.msg,
                                });
                            }
                        }).catch((err) => {
                            this.loading = false;
                            this.$message.error("删除失败，请稍后再试！");
                        });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //显示编辑界面
        handleEdit: function (row) {
            this.editFormVisible = true;
            if (row != undefined && row != "undefined") {
                this.title = "修改";
                this.urlData.id = row.id;
                this.urlData.img = row.img;
                this.urlData.url = row.url;
            } else {
                this.title = "添加";
                this.urlData.id = '';
                this.urlData.img = "";
                this.urlData.url = "";
            }
        },
        // 关闭编辑、增加弹出框
        closeDialog() {
            this.editFormVisible = false;
        },
        //自定义上传方法..
        mainImgUpload(file) {
            //判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            if (names.indexOf(exname) < 0) {
                this.$message.error("不支持的格式!");
                return;
            }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        this.urlData.img = res.url;
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },
        // 获取数据方法
        getdata() {
            this.loading = true;
            selectJumpByTypes({
                type: 1
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.listData = res.data.data;
                    return;
                }
                this.$message({
                    type: "info",
                    message: res.msg,
                });
            });
        },
    }
}
</script>

<style>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}

.upload-demo {
    display: flex;
    flex-direction: row;
}

.upload-demo img {
    width: 140px;
    height: 140px;
}


.deleUrl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99px;
}


.upload-demo img {
    width: 160px;
    height: 140px;
}
</style>